<template>
    <div class="menu-form">
        <el-form ref="form" :model="menu" label-width="100px">
            <el-row>
                <el-form-item>
                    <template slot="label">
                        <span>选择父菜单:</span>
                    </template>
                    <tree-select style="width: 500px" :options="options" @getValue="getMenuParent" :defaultValue="{value:menu.parentId,parentName:menu.parentName}"  v-model="menu.parentId"/>
                </el-form-item>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>菜单名称</template>
                        <el-input v-model="menu.menuName" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>菜单或权限</template>
                        <el-radio v-model="menu.menuRole" label="1" @change="clearMenu">菜单</el-radio>
                        <el-radio v-model="menu.menuRole" label="2" @change="clearMenu">权限</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>菜单链接</template>
                        <el-input v-model="menu.menuLink" maxlength="64" style="width:500px" :disabled="!(menu.menuRole == '1')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>权限标识</template>
                        <el-input v-model="menu.menuIdent" maxlength="255" style="width:500px" :disabled="!(menu.menuRole == '2')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>菜单图标</template>
                        <e-icon-picker v-model="menu.menuIcon" style="width:500px"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>排序</template>
                        <el-input v-model="menu.sort" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="menu.remarks" style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">取 消</el-button>
                        <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>

                </span>
            </div>
        </el-form>
    </div>
</template>

<script>
    import menuApi from '@/api/menu/menuApi'
    import treeSelect from "../../components/treeselect/TreeSelect";
    export default {
        name: "MenuForm",
        components: {
            treeSelect,
        },
        data() {
            return {
                menu:{
                    id:'',
                    menuName:'',
                    menuLink:'',
                    menuIcon:'',
                    menuRole:'',
                    menuIdent:'',
                    parentId:'',
                    parentName:'',
                    sort:'',
                    remarks:'',
                },
                // 数据列表
                options: [],
            };
        },
        methods:{
            getMenuParent(res){
                this.menu.parentId=res.parentId
                this.menu.parentName=res.parentName
            },
            async onEditSubData(){
                let res = '';
                if (this.menu.id != ''){
                    res = await menuApi.updateMenu(this.menu)
                    if (res.code == '200'){
                        this.$emit('onUpdateSuccess',res.data)
                    }else {
                        this.$message.error(res.msg)
                    }
                }else {
                    res = await menuApi.saveMenu(this.menu)
                    if (res.code == '200'){
                        this.$emit('onAddSuccess',res.data)
                    }else {
                        this.$message.error(res.msg)
                    }
                }

            },
            editDataBoxClose(){

            },
            clearDate(){
                let  menu={
                        menuName:'',
                        menuLink:'',
                        menuIcon:'',
                        menuRole:'',
                        menuIdent:'',
                        parentId:'',
                        parentName:'',
                        sort:'',
                        remarks:'',
                    }
                    this.menu =menu
            },
            clearMenu(){
                this.menu.menuIdent='';
                this.menu.menuLink='';
            }
        },
        created:async function () {
            let res = await menuApi.getList({menuName:''});
            if(res.code == '200'){
                this.options = res.data
            }else {
                this.$message.error(res.msg)
            }
        },
        props:{
            editItemData:{
                require:true
            }
        },
        watch:{
            editItemData:{
                immediate: true,
                handler(newVal,oldVal){
                    if (newVal!=''){
                        this.menu = newVal
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>